<template>
	<div class="tab-front" v-loading="loading[0]" element-loading-text="拼命加载中..." element-loading-spinner="el-icon-loading" element-loading-background="#fff">
		<el-tabs v-model="activeName[0]">
			<el-tab-pane label="辅助资料大类" name="first">
				<section-1 v-if="activeName[0] === 'first'"/>
			</el-tab-pane>
			<el-tab-pane label="辅助资料明细" name="second">
				<section-2 v-if="activeName[0] === 'second'"/>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script>
import Tree from './tree'
import Section1 from './section1'
import Section2 from './section2'
export default {
	components: {
		'v-tree': Tree,
		'section-1': Section1,
		'section-2': Section2,
	},
	data() {
		return {
			activeName: this.$store.state.auxiliaryStore.activeName,
			loading: this.$store.state.auxiliaryStore.loading
		}
	},
	watch: {
		activeName(newVal) {
			setTimeout(() => {
				let treeData = this.$store.state.auxiliaryStore.treeData;		//监听页面切换，默认高亮树形第一个节点
				this.$store.commit('auxiliaryStore/updateExpandNodeId', treeData[0]['id']);
				this.$store.commit('auxiliaryStore/updateRow', treeData[0]);
			});
		}
	},
	created() {
		this.$store.commit('auxiliaryStore/updateActiveName', 'first');
	}
}
</script>